<style>
    #container {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        padding: 0;
        box-sizing: border-box;
        overflow: hidden;
        background: white;
    }

    .edit {
        position: absolute;
        top: 100px;
        left: 0;
        right: 0;
        bottom: 20px;
        box-sizing: border-box;
    }

    #myDiagramDiv {
        width: 80%;
        height: 100%;
        float: left;
        box-sizing: border-box;
    }

    #property {
        width: 20%;
        height: 100%;
        float: left;
        border: 1px solid #cecece;
        box-sizing: border-box;
        padding: 10px;
    }

    #btn-save{
        position: absolute;
        right: 30px;
        top: 50px;
    }

    #btn-add {
        position: absolute;
        left: 30px;
        top: 60px;
    }

    .layui-form-label {
        text-align: center;
    }
</style>
<div id="container" class="fsh-rightPanel">
    <button class="layui-btn layui-btn-normal" id="btn-save">保存</button>
    <button class="layui-btn layui-btn-warm layui-btn-sm" id="btn-add">+新建目录</button>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>课程目录</legend>
    </fieldset>
    <div class="edit">
        <div id="myDiagramDiv">

        </div>
        <div id="data">
        </div>
        <div id="property" class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">章节名称</label>
                <div class="layui-input-block">
                    <input type="text" id="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">章节类型</label>
                <div class="layui-input-block">
                    <select name="interest" lay-filter="aihao">
                        <option value="0">直播</option>
                        <option value="1">录播</option>
                        <option value="2">考试</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">录播视频</label>
                <div class="layui-input-block">
                    <input type="text" readonly placeholder="请选择" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">课程作业</label>
                <div class="layui-input-block">
                    <input type="text" readonly placeholder="请选择" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">考试考题</label>
                <div class="layui-input-block">
                    <input type="text" readonly placeholder="请选择" class="layui-input">
                </div>
            </div>
        </div>

    </div>
</div>


<script>
    var nodeDataArray;
    var linkDataArray;
    var diagram;
    var title = $("#title");
    layui.use(['layer', 'form', 'table', 'element'], function () {
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var element = layui.element;
        form.render();

        initDiagram();

        //  新增节点
        $('#btn-add').click(function () {
            addNewNode();
        });
        // 保存
        $('#btn-save').click(function () {
            save();
        });
        //选择老师
        $('#teacherName').click(function () {
            showBigDialog({
                title: '选择老师'
                , template: 'views/static/courseware/template/teacher.html'
                , yes: function (index, layero) {
                    var checkData = table.checkStatus('teacherTable').data;
                    layer.close(index);
                    // var ids = [];
                    var names = [];

                    for (var i = 0; i < checkData.length; i++) {
                        //  ids.push(checkData[i].user_id);
                        names.push(checkData[i].username);
                    }
                    //  $('#teacherId').val(ids.toString());
                    $('#teacherName').val(names.toString());
                }

            })
        });
    });

    function initDiagram() {
        var $ = go.GraphObject.make;
        diagram = $(go.Diagram, "myDiagramDiv", {

            initialContentAlignment: go.Spot.Center, // 居中显示Diagram内容
            "undoManager.isEnabled": true,// 打开Ctrl-Z撤销和Ctrl-Y重做功能
            // layout: $(go.TreeLayout,
            //     {angle: 90, layerSpacing: 35 }),
        });
        diagram.nodeTemplate =
            $(go.Node, "Auto",
                new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
                $(go.Shape, "RoundedRectangle", {fill: "#44CCFF", stroke: null}),
                $(go.TextBlock, {
                        margin: 12,
                        portId: "",
                        stroke: "white",
                        fromLinkable: true,
                        toLinkable: true,
                        cursor: "pointer"
                    },
                    new go.Binding("text", "key"))
            );

        diagram.linkTemplate =
            $(go.Link,
                {routing: go.Link.Orthogonal, corner: 5},
                $(go.Shape, {isPanelMain: true, stroke: "transparent", strokeWidth: 8}),  // thick undrawn path
                $(go.Shape, {isPanelMain: true, stroke: "#555", strokeWidth: 3, toArrow: "Standard"}),  // default stroke === "black", strokeWidth === 1
                {
                    // a mouse-over highlights the link by changing the first main path shape's stroke:
                    mouseEnter: function (e, link) {
                        link.elt(0).stroke = "rgba(0,90,156,0.3)";
                    },
                    mouseLeave: function (e, link) {
                        link.elt(0).stroke = "transparent";
                    }
                }
            );

        nodeDataArray = [
            {"key":"新增节点", "loc":"-82 -160"},
            {"key":"新增节点2", "loc":"128 -63"},
            {"key":"新增节点3", "loc":"-27 22"},
            {"key":"新增节点4", "loc":"-228 -1"}
        ];
        linkDataArray = [
            {"from":"新增节点3", "to":"新增节点"}
        ];
        diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
        diagram.addDiagramListener("ObjectSingleClicked", function (e) {
            title.val(e.subject.part.data.key);
            title.blur(function () {
                if (title.val() !== '') {
                    var node = diagram.model.findNodeDataForKey(e.subject.part.data.key);//首先拿到这个节点的对象
                    diagram.model.setDataProperty(node, "key", title.val());//然后对这个对象的属性进行更改
                }
            });
        });
    }
    function save() {
        console.log(diagram.model.toJson());
    }

    function load() {
        diagram.model = go.Model.fromJson(document.getElementById("data").value);
    }
    function addNewNode() {
        diagram.model.addNodeData({"key": "新增节点"});
    }

    function updateNodeProperty(key, value) {
        var node = diagram.model.findNodeDataForKey(e.subject.part.data.key);//首先拿到这个节点的对象
        diagram.model.setDataProperty(node, key, value);//然后对这个对象的属性进行更改
    }
</script>
